<template>
  <div>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3598169_7r55619imsg.css">
    <div class="nav" v-show="flagInfo.flag">
      <router-link to="/"><i class="iconfont icon-shouye"></i>首页</router-link>
      <router-link to="/leave"><i class="iconfont icon-qingjiaxiaojia"></i>请假管理</router-link>
      <router-link to="/cards"><i class="iconfont icon-huiyuanyiqiatong01"></i>一卡通</router-link>
      <router-link to="/mine"><i class="iconfont icon-gerenzhongxin"></i>个人中心</router-link>
    </div>
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>
<script setup>

import { flagStore } from "@/stores/counter";
import {ref, watch} from 'vue'
let flagInfo = flagStore();

</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.nav {
  line-height: 50px;
  position: fixed;
  display: flex;
  left: 0;
  bottom: 0;
  background: white;
  width: 100%;
  z-index: 999;
  line-height: 30px;
  a {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: rgba(81, 76, 76, 0.667);
  }
  .router-link-active {
    color: #1989fa;
  }
  i{
    display: block;
    font-size: 26px;
  }
}
section {
  margin-bottom: 50px;
}
 .van-grid-item .van-grid-item__content .van-badge__wrapper .van-icon__image{
  width: 50px ;
    height: 50px ;
  }
  // .van-sidebar{
  //   width: 30px ;
  // }
  // .van-tree-select__nav{
  //   width: 30px !important;
  // }
// .van-grid-item .van-grid-item__content .van-badge__wrapper .van-icon__image {
//   width: 50px;
//   height: 50px;
// }
</style>
